import React,{useState,useMemo} from 'react'
import { downloadFileToExcel } from '@/assets/data/common.js'
import { Modal ,Input,Radio,message}  from 'antd'
import { pagGetCarApi, getCarApi } from '@/request/datamanagment.js'
import '@/assets/less/excelexport.less'
function ExcelExport(props) {
  const {
    carData,                  //当前页数据
    isShowExport = ()=>{},    
    logRecord=()=>{},
    showExcel,                //是否展示导出框
    pagination                //当前分页信息
  } = props
  /* 表头 */
  let header = ['id', '车牌号', '车辆颜色', '车牌颜色', '车牌型号', '车辆点位', '天窗', '行李架', '车辆图片', '录入时间']
  let [exportData, setExportData] = useState([])   //需要导出的数据
  let [startPage, setStartPage] = useState(0)      //起始页
  let [endPage, setEndPage] = useState(0)          //终止页
  let [choseTyle,setChoseType] = useState(1)       //选择的导出类型


  /* 分页数据 */
  const getPageData =  ()=>{
    if(startPage>endPage){
      message.warn("输入导出的页面参数不正确")
    } else if (!startPage || !endPage){
      message.warn("请输入对应的导出页数") 
    }else{
      pagGetCarApi(startPage, pagination.pageSize, endPage - startPage + 1).then(res => {
        setExportData(res.data)
      })
    }
  }

  /* 选择导出的页数 */
  const exportPageHnadler=(e,value)=>{
    if (choseTyle !== 2) return message.warn("请先选择的导出类型")
    if (value ==="startpage"){
      setStartPage(e.target.value)
    }else{
      setEndPage(e.target.value)
    }
  }

  
  const addhandleOk = () => {
    if (choseTyle === 2 && startPage === 0 && endPage === 0) {
      message.warn("请选择导出页数")
    }else{
      if (choseTyle === 1) {
        setExportData(carData)
        
        logRecord(`导出第${pagination.current}页`, "车辆数据导出")
      } else if (choseTyle === 2) {
        getPageData()
       
        logRecord(`导出${startPage}至${endPage}页`, "车辆数据导出")
      } else {
        getCarApi().then(res => setExportData(res.message))
        logRecord(`全部导出`, "车辆数据导出")
      }
      isShowExport(false)
    
    }
  }

  useMemo(()=>{
    if (exportData.length!==0) {
      // 导出数据
      downloadFileToExcel(exportData, header)
    }
  }, [exportData])
  return (
    <>
      <Modal title="导出车辆数据" visible={showExcel} onOk={addhandleOk}
        onCancel={() => isShowExport(false)}
        okText="导出"
        cancelText
        width={400}
      >
      <div className='select_exprt'>
        <Radio.Group onChange={(e)=>setChoseType(e.target.value)} defaultValue={1}
          className="select_exprt_radio"
          
        >
          <Radio value={1}>导出当前页</Radio>
          <Radio value={2}>导出指定页</Radio>
          <Radio value={3}>全部导出</Radio>
        </Radio.Group>
        <div className='export_interval'>
            <Input style={{ width: "50px" }} onChange={(e) => exportPageHnadler(e,"startpage")}></Input>
             至
            <Input style={{ width: "50px" }} onChange={(e) => exportPageHnadler(e,"endpage")}></Input>
             页
         </div>
      </div>
      </Modal>
    </>
  )
}
export default ExcelExport
